<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showPos">查看位置</button>
        <!-- <hr/>
        <h2>测试：{{ a }}</h2>
        <h2>测试：{{ b }}</h2>
        <button @click="test">b + 1</button> -->
    </div>
</template>

<script lang="ts">
    /* 
        vue2 和 vue3 的共存性：
        1、setup 和 data、methods、watch 等都可以共存
        2、由于 setup 的生命周期在 beforeCreate 之前，所以在 data 去解析数据时，setup 中的数据早已配置完毕，所以可以被 data 读取到
           同理，setup 无法读取 vue2 中原始写法的内容
        3、极其不推荐 vue2、vue3 语法混用
    */

    export default {
        name: 'Person',
        // vue 2 中的 选项式 API 写法
        // data(){
        //     return{
        //         name:'zzq',
        //         age:28,
        //         position:'PF'
        //     }
        // },
        // methods:{
        //     showPos(){
        //         alert(this.position)
        //     },
        //     changeName(){
        //         this.name = 'zm'
        //     },
        //     changeAge(){
        //         this.age --
        //     }
        // },
        // // 测试 vue2 与 vue3 的数据共存和互相调用
        // data(){
        //     return {
        //         a: 100,
        //         b: this.age
        //     }
        // },
        // methods:{
        //     test(){
                
        //     }
        // },
        setup(){    
            /* 
                setup 配置项中，可以按照常规 TS 的语法对数据和方法进行定义，但是这么写的话，数据不是响应式的，不会自动更新
                setup 中不可以向 vue 2 一样使用 this，因为 this == undefined
             */
            // data（非响应式，可以修改但是页面不会发生变化）
            let name = 'zzq'
            let age = 28
            let position = 'PF'

            // data（响应式）
            

            // methods
            function changeName(){
                name = 'zm'
            }
            function changeAge(){
                age--
            }
            function showPos(){
                alert(position)
            }

            // setup 的返回值。将定义的所有内容返回出去，就可以在 template 中直接使用
            return {name, age, position, showPos, changeAge, changeName}        // 返回
            /* 
                setup 的返回值有几种情况：
                1、返回一个普通对象，这个对象就包含了 template 中需要使用的全部内容（数据、函数等）
                2、返回一个函数，该函数的返回值将会直接替代 template 的内容、直接显示在页面上，所以该函数叫做《渲染函数》
            */
            // return () => 'haha'  // 这就是第二种情况：渲染函数
        }

    }
</script>

<style scoped>
    .person{
        background-color: #d8a7af;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        padding: 20px;
        margin: 10px 0;
    }
</style>